<template>
  <div id="offHookRateChart">
    <DecorativeTitle text="未接听率"/>
    <div>
      <Echart :options="options" height="210px" width="100%"></Echart>
    </div>
  </div>
</template>

<script>

import DecorativeTitle from "_c/DecorativeTitle.vue";
import Echart from "@/common/echart/index.vue";

export default {
  components: {
    Echart,
    DecorativeTitle

  },
  props: {
    data: {
      type: Array,
      default: () => ([0, 0, 0])
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    data: {
      handler (newData) {
        this.options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            // 显示百分比格式的提示框
            formatter: '{a} <br/>{b}: {c}%'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            // 固定横坐标为3s、5s、10s
            data: ['3s', '5s', '10s'],
            axisLabel: {
              interval: 0,
              rotate: 0
            }
          },
          yAxis: {
            type: 'value',
            min: 0,

            // 显示百分比格式
            axisLabel: {
              formatter: '{value}%'
            },
            // 网格线配置
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            }
          },
          series: [
            {
              name: '未接听率',
              type: 'bar',
              data: newData || [0, 0, 0],
              itemStyle: {
                color: '#5470c6'
              },
              barWidth: '40%',
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                textStyle: {
                  color: '#FFF'
                }
              }
            }
          ]
        };
      },
      immediate: true,
      deep: true
    }
  }
};
</script>

<style lang="scss" scoped>
$box-height: 290px;
#offHookRateChart {
  padding: 15px;
  width: 100%;
  height: $box-height;
}
</style>
